<template>
    <div class="detaile">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="getBack"></i>
            <span class="titleOne">{{tite}}</span>
            <span class="titleTwo" @click="Friends" >{{myTeam}}</span>
        </div>
        <div class="myTeamCenter" v-if="dataList">
            <div class="myTeamCenter-Box" v-for="(item,index) in dataList" :key="index">
                <div class="myTeamImg">
                    <img :src="item.inviteByUserAvatar" alt="">
                </div>
                <div class="myTeamText">
                    <p class="Text-top">{{item.inviteByUserName}}</p>
                    <p class="Text-bottom">邀请日期：{{item.inviteCreateTime}}</p>
                </div>
            </div>
        </div>
        <div class="NoFriend" v-else>
            <img src="../assets/invite/haveNoFriend.png" alt="">
            <span>你目前暂无团队人员， 快去邀请好友组建团队吧</span>
            <button @click="Friends">去邀请</button>
        </div>
    </div>
</template>
<script>
import {Toast} from 'vant';
export default {
    data() {
        return {
            tite:"我的团队",
            myTeam:"邀请好友",
            show: false,
            array:[
                {img:require("../assets/Mymi/InformImg.png"),name:"大白菜",data:"2012.03.12.16:00"},
                {img:require("../assets/Mymi/InformImg.png"),name:"大白菜",data:"2012.03.12.16:00"},
                {img:require("../assets/Mymi/InformImg.png"),name:"大白菜",data:"2012.03.12.16:00"}
            ],
            dataList:[]
        }
    },
    mounted() {
        // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    destroyed() {
         // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    created (){
        this.getTeamData ();
    },
 
    methods: {
        getBack(){
            this.$router.push("/Mymi")
        },
        goBack(){
            this.$router.push("/Mymi");
        },
        Friends(){
            this.$router.push("/inviteFriends");
        },
        //获取团队数据
        getTeamData (){
            this.$axios.post("/cct/invite/userInvitationList",{}).then(res =>{
                console.log("团队人数",res);
                if(res.data.code==0){
                    this.dataList =res.data.rows;
                }
            })
        }

    },
}
</script>
<style lang="less" scoped>
.detaile{
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    font-size: 0;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333;
        height: 1.25rem;
        line-height: 1.25rem;
        background-color: #fff;
        padding: 0 0.2rem;
        .titleOne{
            padding: 0.4rem 1.44rem 0.4rem 2.5rem;
        }
        .titleTwo{
            font-family: "PingFang-SC-Medium";
            font-weight: Medium;
            font-size: 0.28rem;
        }
    }
    .myTeamCenter{
        width: 100%;
        height: 1rem;
        .myTeamCenter-Box{
            display: flex;
            margin-top: 0.32rem;
            img{
                width: 1rem;
                height: 1rem;
                margin-left: 0.32rem;
                border-radius: 50%;
            }
        }
        .myTeamText{
            width: 5.6rem;
            height: 1rem;
            margin-left: 0.25rem;
            .Text-top{
                font-family: "PingFang-SC-Medium";
                font-weight: bold;
                font-size: 0.28rem;
                color: #333333;

            }
            .Text-bottom{
                font-family: "PingFang-SC-Medium";
                font-weight: Medium;
                font-size: 0.24rem;
                color: #666666;
                margin-top: 0.15rem;
            }
        }
    }
    .NoFriend{
        width: 100%;
        img{
            width: 2.1rem;
            height: 2.1rem;
            margin:  2.5rem 2.65rem 0rem 2.65rem;
        }
        span{
            font-family: "PingFang-SC-Medium";
            font-weight: Regular;
            font-size: 0.32rem;
            color: #333333;
            display: inline-block;
            width: 3.6rem;
            margin:  0.5rem 1.95rem 0rem 1.95rem;
        }
        button{
            background: #38A83F;
            cursor: pointer;
            text-decoration: none;
            outline: none;
            padding: 0.23rem 1.29rem;
            vertical-align: middle;
            border: none;
            color: white;
            font-family: "PingFang-SC-Medium";
            font-weight: Medium;
            font-size: 0.34rem;
            margin:  0.7rem 1.95rem 0rem 1.95rem;
            border-radius: 0.15rem;
        }
    }
}
</style>

